<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: center;">
        <span>禁毒业务架构</span>
      </div>
      <v-chart :option="options" v-if="options" style="height: 750px;" @click="handleClick"/>
    </el-card>
    <struct-detail ref="structDetail"/>
  </div>
</template>

<script>
import 'echarts'
import VChart from 'vue-echarts'
import {deptTreeSelect} from "@/api/system/user";
import StructDetail from "@/views/member/struct/struct.vue";

function setupTreeData(data) {
  data.forEach(d=> {
    d['name'] = d.label
    d['collapsed'] = false
    if (d.children && d.children.length > 0) {
      setupTreeData(d.children)
    }
  })
}

export default {
  name: "memberStruct",
  components: {StructDetail, VChart},
  data() {
    return {
      visible: false,
      dataLoaded: false,
      deptData: [],
      options: undefined
    }
  },
  mounted() {
    deptTreeSelect().then(res=> {
      this.deptData = res.data
      setupTreeData(this.deptData)
      this.options = this.getOptions()
    }).finally(()=> {
      this.dataLoaded = true
    })
  },
  methods: {
    handleClick({data}) {
      this.$refs.structDetail.open(data.id, data.label)
    },
    getOptions() {
      const data = this.deptData && this.deptData.length>=1 ? this.deptData[0] : {}
      return {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            orient: 'vertical',
            data: [data],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 10,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 12
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: false,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
    },
  }
}
</script>

<style scoped>

</style>
